<template>
  <div id="producer-consumer">
    <el-card class="process-card">
      <el-row :gutter="22">
        <el-col :span="2"></el-col>
        <el-col :span="15">
          <p class="pb-1">物品数量</p>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="(productArrayLen / 10) * 100"
            :color="customColors"
          ></el-progress>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="2">
          <el-button type="primary" @click="run">开始</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="role-box">
      <h1 class="role-text">{{ role }}</h1>
    </div>
  </div>
</template>

<script>
import ProcessTable from '@/components/process/ProcessTable'
export default {
  components: { ProcessTable },
  data() {
    return {
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],

      sigintCount: 0,
      productArray: [],
      productArrayLen: 0,
      productLock: false,
      PRODUCT_ARRAY_THRESHOLD: 10,
      role: '',
    }
  },
  computed: {},
  methods: {
    run() {
      var producerTimer = setInterval(() => {
        if (!this.productLock) {
          if (!this.productLock) {
            this.productLock = true

            if (this.productArrayLen < this.PRODUCT_ARRAY_THRESHOLD) {
              this.productArray.push('product')
              this.productArrayLen++
              console.log('product:' + this.productArrayLen + 'producer .push')
              this.role = '生产'
            } else {
              console.log('product:' + this.productArrayLen + 'producer .pop')
            }

            this.productLock = false
          }
        }
      }, 500 + this.getRandomInt(1500))

      var consumerTimer = setInterval(() => {
        if (!this.productLock) {
          if (!this.productLock) {
            this.productLock = true

            if (this.productArrayLen) {
              var product = this.productArray.shift()
              this.productArrayLen--
              this.role = '消费'
              console.log('product:' + this.productArrayLen + 'consumer .pop')
            } else {
              console.log('product:' + this.productArrayLen + 'consumer .push')
            }

            this.productLock = false
          }
        }
      }, this.getRandomInt(1000) + 1000)
    },

    getRandomInt(max) {
      return Math.floor(Math.random() * max)
    },
  },
}
</script>

<style scoped>
#producer-consumer {
  width: 95vw;
  margin: 0 auto;
  margin-top: 2vh;
}
.process-card {
  margin-bottom: 1vh;
}
.item {
  margin-left: 10px;
}
.role-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.role-box h1 {
  display: block;
  font-size: 50px;
}
</style>
